<!DOCTYPE html><html><head><title>06-css样式（Font+Text）+特殊符号</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="06-css样式fonttext特殊符号">07-css样式（Font+Text）+特殊符号</h1>

<h3 id="一font字体样式">一、font字体样式</h3>

<p>1、font的所有属性值默认为<code>normal（正常）</code></p>

<blockquote>
  <ul><li><strong>font-family</strong>：字体 <br>
  <ul>
  <li><code>font-family</code>:‘微软雅黑’,’宋体’；</li></ul></li>
  <li><strong>font-size</strong>：字体大小  单位：px、%、em、rem <br>
  <ul>
  <li><code>%</code>   相对于父容器中字体%调整</li>
  <li><code>em</code>   相对于所在盒子或父级字体大小 <br>
  -<code>rem</code>  相对于html（根标签）的字体大小</li></ul></li>
  <li><strong>font-weight   </strong>:字体粗细 <br>
  <ul>
  <li><code>normal</code>  正常</li>
  <li><code>bold</code>   加粗</li>
  <li>数值：<code>100</code>-<code>900</code>。<code>400</code>等同<code>normal</code>，<code>700</code>等同<code>bold</code></li></ul></li>
  <li><strong>font-style</strong>：字体类型（设置是否倾斜） <br>
  <ul>
  <li><code>italic</code>       强制斜体</li>
  <li><code>oblique</code>      文字倾斜 </li></ul></li>
  <li>font-variant：规定小型大写字母的字体 <br>
  <ul>
  <li><code>small-caps</code>   小型大写字母</li></ul></li>
  <li><strong>line-height</strong>：行高，设置行与行之间的距离 <br>
  <ul>
  <li>px</li>
  <li>倍数数值</li></ul></li>
  </ul>
</blockquote>

<p><code>font的简写</code>：font: font-style font-variant font-weight font-size/line-height font-family; <br>
<code>注：</code>font属性会被后代继承</p>



<h3 id="二text文本样式">二、text文本样式</h3>

<blockquote>
  <ul><li>text-transform：文本的大小写 <br>
  <ul>
  <li>uppercase  字母大写。</li>
  <li>lowercase  小写字母。</li>
  <li>capitalize 单词首字母大写。    </li></ul></li>
  <li>text-align：文本水平对齐方式 <br>
  <ul>
  <li>left       把文本排列到左边。</li>
  <li>center     居中对齐    </li>
  <li>right      把文本排列到右边。</li></ul></li>
  <li>text-indent     首行缩进 </li>
  <li>text-decoration 文本修饰 <br>
  <ul>
  <li>underline  下划线 </li>
  <li>line-through   中划线 </li>
  <li>overline       上划线 </li></ul></li>
  <li>letter-spacing   字（字母）间距</li>
  <li>word-spacing    词（单词）间距</li>
  <li>white-space 换行方式 <br>
  <ul>
  <li>normal     默认</li>
  <li>nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。  </li></ul></li>
  <li>word-break(css3):属性规定自动换行的处理方法 <br>
  <ul>
  <li>normal     使用浏览器默认的换行规则</li>
  <li>break-all  允许在单词内换行    </li>
  <li>keep-all       只能在半角空格或连字符处换行。</li></ul></li>
  <li>text-overflow (css3)    规定当文本溢出时处理方式； <br>
  <ul>
  <li>clip       修剪文本</li>
  <li>ellipsis       被修剪的文本用略符号来代表(….)。</li></ul></li>
  </ul>
</blockquote>



<h3 id="三特殊符号">三、特殊符号</h3>

<blockquote>
  <p><code>&amp;nbsp;</code>   空格符 <br>
  <code>&amp;lt;</code>      小于符号         &lt; <br>
  <code>&amp;gt;</code>   大于符号         &gt;  <br>
  <code>&amp;copy;</code>版权      ©  <br>
  <code>&amp;reg;</code>注册商标        ® <br>
  更多参考<a href="http://www.w3school.com.cn/html/html_entities.asp" target="_blank">http://www.w3school.com.cn/html/html_entities.asp</a></p>
</blockquote></div></body></html>